<template>
  <div>
    <el-dialog :visible.sync="dialogFormVisible" class="add-role">
      <el-form :model="form">
        <el-row>
          <el-col :span="10">
            <el-form-item label="角色名称" :label-width="formLabelWidth" required>
              <el-input v-model="form.name" autocomplete="off" placeholder="请输入角色名称" />
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="角色描述" :label-width="formLabelWidth" required>
              <el-input v-model="form.description" autocomplete="off" placeholder="请输入角色描述" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer add-role-btn1">
        <el-row>
          <el-col :span="24">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button v-if="isAddOrSave" type="primary" @click="submit()">创建</el-button>
            <el-button v-if="isSave" type="primary" @click="dialogFormVisible">保存</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      isAddOrSave: true,
      isSave: false,
      form: {
        name: '',
        description: ''
      },
      formLabelWidth: '80px'
    }
  },
  mounted() {
    this.$bus.on('rolesDialog', (obj) => {
      this.originObj = obj
      this.isSave = obj.isSave
      this.isAddOrSave = obj.isAddOrSave
      this.dialogFormVisible = true
      if (obj.isSave) {
        this.form = obj
      }
    })
  },
  methods: {
    submit() {
      console.log('gdshsetdg')
    }
  }
}
</script>
<style lang="scss">
  .el-dialog{
    width: 33%;
  }
</style>
